<template>
	<view>
		<view class="cu-list menu-avatar solid-bottom">
			<view class="cu-item">
				<image class="cu-avatar round l" :src="userInfo.avatarUrl"></image>
				<view class="content flex-sub">
					<view class="text-gray">{{ userInfo.nickName }}</view>
				</view>
			</view>
		</view>
		<!-- 分类选择模块 -->
		<view class="solid-bottom" style="display: flex;align-items: center;padding: 10rpx 20rpx;border-bottom: #bcbcbc 2rpx solid;">
			<view class="text-bold">选择：</view>
			<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
				<u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name" @change="radioChange">
					{{ item.name }}
				</u-radio>
			</u-radio-group>
		</view>
		<view class="cu-form-group"><textarea maxlength="-1" @input="textareaAInput" v-model="content" :placeholder=holdertext
				style="height:400rpx"></textarea></view>
		<view class="cu-bar bg-white margin-top">
			<view class="action">图片上传</view>
			<view class="action">{{imageListLength}}/6</view>
		</view>
		<view class="cu-form-group">
			<!-- 上传图片 -->
			<uni-file-picker class="margin-top-xs" v-model="imageList" file-mediatype="image" mode="grid"
				:image-styles="imageStyles" file-extname="jfif,bmp,jpg,jpeg,png,tif,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp,avif,apng" :limit="6" ref="files" :auto-upload="false"
				@progress="progress" @success="success" @fail="fail" @select="select" @delete="deleteImage" />
		</view>
		<view class="cu-bar bg-white fixed-bottom">
			<view class="radius fl padding-sm"><button class="cu-btn bg-gradual-orange round shadow-blur"
					@click="submit">提交</button></view>
			<view class="radius fr padding-sm"><button class="cu-btn bg-gradual-orange round shadow-blur"
					@click="back">返回</button></view>
		</view>
		<!-- //消息弹窗 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	//数据库引入
	const db = uniCloud.database()
	const dbCmd = db.command;
	//引入全局变量
	var app = getApp()
	export default {
		data() {
			return {
				holdertext:"1.商品出现问题可以附上订单截图，商家名称以及餐品图片哦\n2.如果是对于楼栋长送餐的建议请附上楼栋号哦\n3.任何建议都可以添加福利群中楼栋负责人的微信进行反馈哦，我们力争给大家更好的服务。",
				radiolist1: [
					{
						name: '楼栋长',
						disabled: false
					},
					{
						name: '商家',
						disabled: false
					},
					{
						name: '配送',
						disabled: false
					},
					{
						name: '其它',
						disabled: false
					}
				],
				radiovalue1: '苹果',
				type: 0, //1 举报帖子2举报评论人3意见反馈
				ispost: false,
				pass: false,
				fid: '', //举报类型
				content: '',
				openid: '',
				imgList: [],
				userInfo: {},
				commentContent: '',
				imageListLength: 0,
				imageList: [],
				imageListResult: [],
				imageStyles: {
					width: 80,
					height: 80,
					border: {
						color: '#8a8a8a',
						width: 2,
						style: '',
						radius: '2px'
					}
				}
			};
		},
		onLoad() {
			let that = this;
		},
		onShow() {
			let that = this
			uni.getStorage({
				key: 'user_sxz',
				success(res) {
					if(res.data.openid == '' || res.data.openid == undefined) {
						uni.showModal({
							title:"获取本地缓存失败，是否立即登录！",
							success(res) {
								uni.switchTab({
									url: '../me'
								})
							}
						})
					}else{
						//获取到信息
						that.openid = res.data.openid;
						that.userInfo = res.data.info;
					}
				}
			})
		},
		methods: {
			//输入框内容
			textareaAInput(e) {
				this.content = e.detail.value;
				console.log(this.content);
			},
			//删除图片
			deleteImage(e) {
				console.log(e);
				this.imageListLength--;
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e);
				this.imageListLength++;
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e);
			},
			// 上传成功
			success(e) {
				var that = this;
				console.log('上传成功', e);
				uni.hideLoading()
				this.imageListResult = e.tempFilePaths
				//上传成功调用添加加数据库方法
				that.addpost();
			},
			// 上传失败
			fail(e) {
				console.log('上传失败：', e);
				uni.hideLoading();
				this.$refs.uToast.show({
					title: '图片上传失败！请检查网络！',
					type: 'error'
				});
			},
			//单选框
			groupChange(n) {
				console.log('groupChange', n);
				// this.type = n;
			},
			radioChange(n) {
				console.log('radioChange', n);
				this.type = n;
				console.log('type:', this.type);
			},
			//上传图片方法调用
			upload() {
				console.log("上传啦")
				this.$refs.files.upload();
			},
			//-------------=图片上传模块-----------------

			//----------------举报------------------
			submit() {
				let that = this;
				//未选择对象
				if (that.type == '') {
					that.$refs.uToast.show({
						title: '未选择对象',
						type: 'error'
					});
					return;
				}
				//检测是否填写内容
				if (this.content == '') {
					this.$refs.uToast.show({
						title: '请先填写发布内容！',
						type: 'error'
					});
					return;
				}
				//弹出发布确认弹窗
				uni.showModal({
					title: '提示',
					content: '是否确认提交改反馈？平台将按事实情况予以处理！',
					showCancel: true,
					confirmText: '是',
					confirmColor: '#000000',
					cancelText: '否',
					cancelColor: '#000000',
					success(res) {
						if (res.confirm) {
							that.tijiao();
						} else if (res.cancel) {
							return false;
						}
					}
				});
			},
			//最终审核
			tijiao() {
				let that = this;
				//---------内容审核--------------
				//审核通过上传图片到云储存
				if (that.imageListLength > 0) {
					uni.showLoading({
						title: '图片上传中...',
						mask: true
					})
					that.upload();
				} else {
					that.addpost();
				}
			},
			//上传数据库
			addpost() {
				let that = this;
				//loading发布中
				uni.showLoading({
					title: '准备发送...',
					mask: true
				})
				//添加说说记录
				db.collection('feedback').add({
					data: {
						openid: that.openid,
						type: that.type,
						state: 0,
						nickName: that.userInfo.username,
						content: that.content,
						imagelist: that.imageListResult,
						time: new Date().getTime()
					}
				}).then((res) => {
					//发布成功隐藏
					uni.hideLoading({})
					//跳转到首页
					that.$refs.uToast.show({
						title: '上传成功！',
						type: 'success'
					});
					that.content = "";
					that.imageList = [];
					that.imageListResult = [];
					that.imageListLength = 0;
				})
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 0
				})
			}
		}
	};
</script>

<style>
	page {
		background: #FFFFFF;
	}

	.fixed-bottom {
		bottom: 0;
		width: 100%;
		position: fixed;
	}
</style>
